import React, { useState } from 'react'

import { Input, Tabs } from 'antd-mobile'
import { VolumeO } from '@react-vant/icons'
import { useNavigate, } from 'react-router-dom'

import { Space, Badge } from 'react-vant'

import Tavs from '../../compents/Tavs';
const Index = () => {

  const [value, setValue] = useState('');
  const navigate = useNavigate();


  return (
    <div className='Home'>
      <div className='Wz'>
        <div className='Top'>
          <div className="left">
            <span>您的位置</span>
            <p><h2 onClick={() => navigate('/city')}>北京市，北京市</h2></p>
          </div>
          <div className="right">
            <Badge dot>
              <VolumeO />
            </Badge>
          </div>
        </div>
      </div>
      <div className="Inp">
        <Input
          placeholder='搜索'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
      </div>
      <div className="tabs">
        <Tabs>
          <Tabs.Tab title='全部' key='fruits'>
            <div className="sy">
              <h3>即将开始</h3><span onClick={() => navigate('/list')}>查看所有</span>
            </div>
            <div>

            </div>
          </Tabs.Tab>
          <Tabs.Tab title='音乐会' key='vegetables'>
            西红柿
          </Tabs.Tab>
          <Tabs.Tab title='动物' key='animals'>
            蚂蚁
          </Tabs.Tab>
        </Tabs>
      </div>

      <Tavs />
    </div>
  )
}

export default Index;